<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jquery表单验证</title>
		<!--引入时间日期插件资源文件：css、js、imgs--->
		<script type="text/javascript" src="../js/My97DatePicker/WdatePicker.js"></script>
		<!---验证框架的资源文件--->
		<script src="../js/jquery.validate/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
		<!--验证表单的配置文件-->
		<script src="../js/jquery.validate/jquery.validate.min.js" type="text/javascript" charset="utf-8"></script>
		<!--验证表单方法的文件-->
		<script src="../js/jquery.validate/additional-methods.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery.validate/messages_zh.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				//扩展自定义的验证规则
				$.validator.addMethod("isMobile", function(value, element) { 
					var length = value.length; 
					var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/; 
					return this.optional(element) || (length == 11 && mobile.test(value)); 
				}, "请正确填写您的手机号码");
				
				//validate()验证所选的表单	
				$("#myform").validate({					
					rules:{
						// 控件的name属性
						userName:{
							// 验证规则，可以有多个规则进行叠加验证
							required:true, // 必填验证规则
							rangelength:[6,12]  // 长度验证
						},
						pw:{
							required:true,
							rangelength:[6,12]
						},
						semail:{
							required:true,
							email:true // 验证邮箱格式是否正确
						},
						tel:{
							required:true,
							isMobile:["element"] // 自定义的验证规则
						},
						sex:{
							required:true
						},
						year:{
							required:true
						},
						month:{
							required:true
						},
						birthday:{
							required:true
						},
						hobby:{
							required:true,
							minlength:"2"  //至少选两项
						},
						tx:{
							extension:'jpg|jpeg|png|gif' // 后缀扩展名的格式验证
						},
						zwjs:{
							rangelength:[30,50]
						}
					},
					// 重定位错误信息提示的位置
				errorPlacement : function(error, element) {
					if (element.is(":radio")){
						error.appendTo(element.parent().next()); 
					}else if (element.is(":checkbox")) {
						error.appendTo(element.parent().next());
					}else {
						error.appendTo(element.parent().next()); 
					}
					}
				});
			});
			
			
		</script>
	</head>
	<body>
		<form action="https://www.baidu.com" method="post" id="myform">
			<table border="1px" cellspacing="0" cellpadding="0" align="center" width="800px" style="background-color: lightgray">
				<tr>
					<td>用户名：</td>
					<td><input type="text" name="userName" id="userName" value="" /></td>
					<td>请输入用户名</td>
				</tr>
				<tr>
					<td>密码：</td>
					<td><input type="password" name="pw" id="pw" value="" /></td>
					<td></td>
				</tr>
				<tr>
					<td>邮箱：</td>
					<td><input type="email" name="semail" id="semail" value="" /></td>
					<td></td>
				</tr>
				<tr>
					<td>联系方式：</td>
					<td><input type="text" name="tel" id="tel" value="" /></td>
					<td></td>
				</tr>
				<tr>
					<td>性别：</td>
					<td>
						男<input type="radio" name="sex" id="sex" value="" />
						女<input type="radio" name="sex" id="sex" value="" />
					</td>
					<td></td>
				</tr>
				<tr>
					<td>出生年月：</td>
					<td>
						<select name="year" id="year">
							<option></option>
							<option value="1990">1990</option>
							<option value="1991">1991</option>
							<option value="1992">1992</option>
							<option value="1993">1993</option>
							<option value="1994">1994</option>
							<option value="1995">1995</option>
							<option value="1996">1996</option>
						</select>年
						<select name="month" id="month">
							<option></option>
							<option value="1">1</option>
							<option value="2">2</option>
							<option value="3">3</option>
							<option value="4">4</option>
							<option value="5">5</option>
							<option value="6">6</option>
							<option value="7">7</option>
							<option value="8">8</option>
							<option value="9">9</option>
							<option value="10">10</option>
							<option value="11">11</option>
							<option value="12">12</option>
						</select>月
						<input name="birthday" id="birthday"  onClick="WdatePicker()" />
					</td>
					<td></td>
				</tr>
				<tr>
					<td>兴趣爱好：</td>
					<td>
						<input type="checkbox" name="hobby" id="hobby" value="" />读书
						<input type="checkbox" name="hobby" id="hobby" value="" />篮球
						<input type="checkbox" name="hobby" id="hobby" value="" />唱歌
						<input type="checkbox" name="hobby" id="hobby" value="" />旅游
					</td>
					<td></td>
				</tr>
				<tr>
					<td>头像：</td>
					<td>
						<input type="file" name="tx" id="tx" value="" />
					</td>
					<td></td>
				</tr>
				<tr>
					<td>自我介绍：</td>
					<td>
						<textarea name="zwjs" rows="6" cols="60"></textarea>
					</td>
					<td></td>
				</tr>
				<tr>
					<td colspan="3" align="center"><input type="submit" name="" id="" value="注册" /></td>
				</tr>
			</table>
			
		</form>		
	</body>
</html>
